<!--
 * @Date: 2023-03-21 15:54:12
 * @LastEditTime: 2023-04-04 15:37:42
 * @FilePath: /nlk/src/views/me/me.vue
 * 介绍:我的
-->
<script lang="ts" setup>
import { addCache } from "@@/hooks/routeCache";
import { formatNumber, _require } from "@@/utils/tools/tools";
import type CpageView from "@@/components/common/CpageView/CpageView.vue";
import bonusLogs from "./components/bonusLogs.vue";
import useUserinfoStore from "@@/store/useUserinfoStore";
import { apiTeam, Team } from "@@/api/module/userinfo";
import router from "@@/router";

const userinfoStore = useUserinfoStore();
userinfoStore.getWalletName();

const CpageViewRef = ref<InstanceType<typeof CpageView>>();

addCache("me");
const { t } = useI18n();

const cellList = computed(() => [
  {
    title: t("wo-de-jie-dian"),
    value: formatNumber(team.value?.recommend, 0),
    unit: t("ge"),
  },
  {
    title: t("she-qu-jie-dian"),
    value: formatNumber(team.value?.total, 0),
    unit: t("ge"),
  },
  {
    title: t("jie-dian-ye-ji"),
    value: formatNumber(team.value?.node, 4),
    unit: "NLK",
    on: {
      click() {
        router.push({ name: "nodeLogs" });
      },
    },
    class: ["active"],
  },
  {
    title: t("she-qu-ye-ji"),
    value: formatNumber(team.value?.all_net, 4),
    unit: "NLK",
    on: {
      click() {
        router.push({ name: "communityLogs" });
      },
    },
    class: ["active"],
  },
]);
/**获取数据 */
const team = ref<Team.Res>();
getTeam();
/**获取社区数据 */
async function getTeam() {
  const res = await apiTeam();
  if (!res) return;
  team.value = res;
}
/**获取我的数据 */
async function onRefresh() {
  CpageViewRef.value?.pullRefreshStart();
  await Promise.all([bonusLogsRef.value!.apiReset(), getTeam()]);
  CpageViewRef.value?.pullRefreshSuccess();
}
const bonusLogsRef = ref<InstanceType<typeof bonusLogs>>();
</script>

<template>
  <CpageView ref="CpageViewRef" @refresh="onRefresh" pull-refresh>
    <BtabbarNav :title="$t('wo-de')" />
    <div class="auto-MT-lg">
      <Ccard class="C-T5 MT-lg" bg="var(--C-B5)">
        <div class="userInfo flex-J-SB flex-A-C">
          <div class="flex-A-C">
            <Rimage
              width="120rem"
              height="120rem"
              :src="_require('src/assets/images/coins/NLK.svg')"
            />
            <div class="ML-xs">{{ userinfoStore.walletName }}</div>
          </div>
          <div v-if="userinfoStore.userinfo?.level" class="flex-A-B">
            <Rimage
              width="80rem"
              height="80rem"
              :src="_require('src/assets/images/me/V.png')"
            />
            <div style="color: #fdd77f">
              {{ userinfoStore.userinfo?.level }}
            </div>
          </div>
        </div>
      </Ccard>
      <div class="auto-MT-sm">
        <Ccard
          v-for="cell in cellList"
          class="shadowVar--c"
          style="--c: var(--C-OT1)"
          :key="cell.title"
          v-on="cell.on || {}"
          :class="cell.class"
        >
          <div class="flex-J-SB">
            <div>{{ cell.title }}</div>
            <div>{{ cell.value }}{{ cell.unit }}</div>
          </div>
        </Ccard>
      </div>
      <bonusLogs ref="bonusLogsRef" />
    </div>
  </CpageView>
</template>

<style lang="less" scoped>
.CpageView {
  padding-top: 0;
  background-image: url(@@/assets/images/me/decoration__1.png);
  background-repeat: no-repeat;
  background-size: 800rem;
  background-position: -150rem 300rem;
}
</style>
